<template>
  <div class="activityPage">
    <div class="searchBox bgfff">
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="店铺名称：" prop="title">
              <el-input v-model="form.title" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人：" prop="principal">
              <el-input
                v-model="form.principal"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话：" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="经营状态：" prop="status">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option label="全部" value="0"></el-option>
                <el-option label="正常" value="1"></el-option>
                <el-option label="暂停兑换" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          style="
            display: flex;
            justify-content: flex-end;
            padding-right: 20px;
            margin-top: 20px;
          "
        >
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit"
              >查询</el-button
            >
            <el-button @click="resetForm('formRef')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <div class="totalTxt">商家数量:{{ total }}</div>
        <el-button
          type="primary"
          size="small"
          @click="
            () => {
              shopInfo = {};
              addShopShow = true;
            }
          "
          >入驻商家</el-button
        >
      </div>
      <el-table :data="tableData" border size="small" style="width: 100%">
        <!-- height="580" -->

        <el-table-column prop="title" label="店铺名称" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="店面图片"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <img
              style="object-fit: contain"
              width="60"
              height="60"
              :src="scope.row.store_pictures"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="principal"
          label="负责人"
          width="100"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="business_scope"
          label="经营范围"
          align="center"
        />
        <el-table-column
          prop="business_addr"
          label="店铺地址"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="score"
          label="当前账号积分"
          align="center"
          width="110"
        />
        <el-table-column
          prop="status_text"
          label="经营状态"
          align="center"
          width="100"
        />

        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="170"
        >
          <template slot-scope="scope">
            <div class="">
              <el-link type="primary" @click="onBtns(1, scope.row)"
                >查看</el-link
              >
              <el-divider direction="vertical"></el-divider>

              <el-link type="primary" @click="onBtns(2, scope.row)"
                >编辑</el-link
              ><el-divider direction="vertical"></el-divider>
              <el-link type="primary" @click="onBtns(3, scope.row)"
                >核销积分</el-link
              >
              <el-link type="danger" @click="onBtns(4, scope.row)">删除</el-link
              ><el-divider direction="vertical"></el-divider>
              <el-link type="danger" @click="onBtns(5, scope.row)">{{
                scope.row.status == 1 ? "冻结" : "解除冻结"
              }}</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
    <addShop
      v-if="addShopShow"
      @handleClose="
        (val) => {
          if (val) {
            addShopShow = false;
            getList();
          } else {
            addShopShow = false;
          }
        }
      "
      :dialogVisible="addShopShow"
      :shopInfo="shopInfo"
    >
    </addShop>
    <shopDetails
      v-if="shopDetailShow"
      @handleClose="shopDetailShow = false"
      :dialogVisible="shopDetailShow"
      :shopId="shopId"
      :shopInfo="shopInfo"
    ></shopDetails>
  </div>
</template>

<script>
import {
  businessList,
  delBusiness,
  cancel,
  chageStatus,
} from "@/api/business.js";
import addShop from "./common/addShop.vue";
import shopDetails from "./common/details.vue";
export default {
  name: "",
  props: [""],

  data() {
    return {
      typeList: {},
      form: {
        title: "",
        principal: "",
        phone: "",
        status: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
      total: 0,
      shopId: "",
      shopInfo: {},
      shopDetailShow: false,
      addShopShow: false,
    };
  },

  components: { addShop, shopDetails },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    hodd(val) {
      alert(val);
    },
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    getList() {
      businessList(this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    onBtns(val, info) {
      console.log(info, "infoinfo=======>");
      this.shopId = info.id;
      this.shopInfo = info;
      if (val == 1) {
        //查看
        this.shopDetailShow = true;
      } else if (val == 2) {
        //编辑
        this.addShopShow = true;
      } else if (val == 3) {
        //核销积分
        this.$confirm("确定核销积分后，将会清除该商户的账户积分余额", "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            cancel({
              id: this.shopId,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "核销成功",
                });
                this.getList();
              }
            });
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消下架",
            // });
          });
      } else if (val == 4) {
        if (this.shopInfo.score > 0) {
          this.$alert("抱歉，该商家账户有未核销积分，请核销后再删除", "", {
            confirmButtonText: "关闭",
            center: true,
            callback: (action) => {},
          });
        } else {
          //删除
          this.$confirm("是否确认删除该商家?", "", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              delBusiness({
                id: this.shopId,
              }).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  this.getList();
                }
              });
            })
            .catch(() => {
              // this.$message({
              //   type: "info",
              //   message: "已取消删除",
              // });
            });
        }
      } else if (val == 5) {
        //冻结，解除冻结
        let txt = "是否确认冻结该商家?";
        let status = 2;
        if (this.shopInfo.status == 2) {
          txt = "是否确认解除冻结该商家?";
          status = 1;
        }
        this.$confirm(txt, "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            chageStatus({
              id: this.shopId,
              status,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getList();
              }
            });
          })
          .catch(() => {});
      }
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.activityPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 120px;
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 200px;
      }
    }
  }
  .tablesCard {
  }
}
</style>
